<template>
  <!-- <page-header-wrapper> -->
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="16">
        <a-col :xl="6" :lg="8" :md="12" :sm="24">
          <a-card :bordered="false" class="height-1000">
            <a-table
              :rowKey="(record, index) => index"
              :dataSource="conversationForm"
              :columns="columns"
              :pagination="paginationFlag"
              :customRow="click"
            >
              <span slot="serial" slot-scope="text, record, index">
                <div>
                  <strong v-if="conversationFlagList[index]" class="unRead">·</strong>
                  <strong @click="selectChat(text, record, index)">{{ text.username }}</strong>
                  <a
                    style="float: right"
                    @click="selectChat(text, record, index)"
                  >{{ text.addTime }}</a>
                </div>
                <a @click="selectChat(text, record, index)">
                  <span v-if="text.msgType === 0">
                    {{
                    text.content ? (text.content.length > 20 ? text.content.slice(0, 20) : text.content) : ''
                    }}
                  </span>
                  <span v-if="text.msgType === 1">[ 图片 ]</span>
                </a>
              </span>
            </a-table>
          </a-card>
        </a-col>
        <a-col :xl="18" :lg="8" :md="12" :sm="24">
          <div class="height-1000">
            <a-card :bordered="false" class="topCard">
              <div>
                <strong>{{ this.userInfo.name ? this.userInfo.name : '' }}</strong>
                <span>{{ ' ' + this.userInfo.mobile ? this.userInfo.mobile : '' }}</span>
                <span>{{ ' ' + this.userInfo.from ? this.userInfo.from : '' }}</span>
              </div>
            </a-card>
            <a-card :bordered="false" class="midCard" ref="midCard">
              <div v-if="moreRecordsFlag" class="moreRecords">
                <a-button @click="getMoreMsg">查看更多消息</a-button>
              </div>
              <div :key="index" v-for="(item, index) in messageList">
                <a-form-item
                  :class="parseInt(item.fromUserid) === userInfo.userId ? 'leftPart' : 'rightPart'"
                >
                  <div :class="parseInt(item.fromUserid) === userInfo.userId ? '' : 'time'">
                    <span>{{ item.addTime }}</span>
                  </div>
                  <div class="chatDiv">
                    <span v-if="item.msgType === 0">{{ item.content }}</span>
                    <img
                      v-if="item.msgType === 1"
                      :src="item.content"
                      class="img"
                      @click="viewPicture(item.content)"
                    />
                  </div>
                </a-form-item>
              </div>
            </a-card>
            <a-card :bordered="false" class="bottomCard">
              <a-form-item v-show="userInfo.userId !== ''">
                <a-textarea class="w100" v-model="form.response" placeholder="请输入回复内容" :rows="3" />
                <a-button type="primary" style="float: right" @click="sendMsg">发送</a-button>
              </a-form-item>
            </a-card>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <a-modal v-model="handleVisible" :footer="null" width="600px" wrapClassName="modalBody">
      <img :src="viewPictureSrc" class="largeImg" />
    </a-modal>
  </div>
  <!-- </page-header-wrapper> -->
</template>
<script>
import { getAction, httpAction } from '@/api/manage.js'
// import { msgList, conversationList } from '@/api/customerService'
const columns = [
  {
    scopedSlots: { customRender: 'serial' }
  }]
export default {
  name: 'CurrentChat',
  components: {
  },
  watch: {
    messageList: function (val) {
      if (val.length > 0) {
        this.refresh()
      }
    }
  },
  data() {
    this.columns = columns
    return {

      url: {
        conversationList: '/123',
        msgList: "/3445",
      },

      // 大于10条显示分页
      messageList: [],
      timestamp: undefined,
      moreRecordsFlag: false,
      conversationForm: [],
      conversationFlagList: [],
      paginationFlag: false,
      midCard: undefined,
      clearTimeSet: undefined, // 定时器
      handleVisible: false,
      viewPictureSrc: undefined,
      fromUserid: '',
      userInfo: {
        name: '',
        mobile: '',
        from: '',
        userId: '',
        clientType: ''
      },
      path: '',
      socket: '',
      // 查询参数
      queryParam: {
        saleSn: undefined,
        consignee: undefined,
        mobile: undefined,
        saleStatus: undefined,
        sort: 'add_time',
        order: 'desc'
      },
      form: {
        response: ''
      },
      params: {
        clientType: 0,
        limit: 10,
        order: 'desc',
        page: 1,
        userId: undefined,
        sort: 'add_time',
        timestamp: undefined
      }
    }
  },
  mounted() {
    // this.getMsgList()
    this.getConversationList()
    // setInterval(() => {
    //   this.reConnect()
    // }, 60000)
  },
  watch: {
    messageList: function (val) {
      if (val.length > 0) {
        this.refresh()
      }
    }
  },
  methods: {
    getMsgList() {
      getAction(this.url.msgList, this.params).then(res => {
        const { errno } = res
        if (errno === 0) {
          const tempMessageList = res.data && res.data.list ? res.data.list : []
          this.moreRecordsFlag = true
          if (tempMessageList.length === 0) {
            this.moreRecordsFlag = false
          }
          tempMessageList.reverse()
          this.messageList = tempMessageList.concat(this.messageList)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getMoreMsg() {
      this.params.timestamp = new Date(this.messageList[0].addTime).getTime()
      this.getMsgList()
    },
    async sendMsg() {
      if (this.form.response.replace(/ /g, '').length === 0) {
        this.$message.error('请勿回复空白')
        return false
      }
      if (!this.isOnlineCurrUser(this.socket)) {
        this.socket = ''
        this.init()
        this.$message.info('已离线，正在重连')
        // this.socket = ''
        // setInterval(this.init(), 1000)
        // this.init()
        this.$message.success('连接成功')
        return
        // this.sendMsg()
        // this.socket.send(JSON.stringify(parmas))
      } else {
        const parmas = {
          clientType: this.params.clientType,
          content: this.form.response,
          fromUserid: sessionStorage.getItem('adminId'),
          msgType: 0,
          toUserid: this.userInfo.userId
        }

        this.socket.send(JSON.stringify(parmas))
        const yy = new Date().getFullYear()
        const mm = new Date().getMonth() + 1
        const dd = new Date().getDate()
        const hh = new Date().getHours()
        const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        const time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf
        parmas.addTime = time
        this.messageList.push(parmas)
      }
      // await sendToUserId(parmas)
      // this.params.timestamp = undefined
      // msgList(this.params).then(res => {
      //   const { errno } = res
      //   if (errno === 0) {
      //     const tempMessageList = res.data && res.data.list ? res.data.list : []
      //     if (tempMessageList.length === 0) {
      //       this.moreRecordsFlag = false
      //     }
      //     this.messageList.push(tempMessageList[0])
      //   }
      // }).catch(err => {
      //   console.log(err)
      // })
      this.form.response = undefined
    },
    getConversationList() {
      const params = {
        limit: 10,
        order: 'desc',
        page: 1,
        sort: 'add_time'
      }
      httpAction(this.url.conversationList, params, 'post').then(res => {
        const { errno } = res
        if (errno === 0) {
          this.conversationForm = res.data && res.data.list ? res.data.list : []
          this.conversationForm.forEach(e => {
            this.conversationFlagList.push(e.inservice === 0 && e.viewed === 0)
          })
          this.paginationFlag = (res.data.total > 9)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    reConnect() {
      if (!this.isOnlineCurrUser(this.socket) && this.userInfo.userId !== '') {
        this.socket = ''
        this.init()
      }
    },
    init: function () {
      if (typeof (WebSocket) === 'undefined') {
        this.$message.error('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.path = 'wss://dev.tianmiwo.com/api/webSocket/' + this.userInfo.userId + '-' + sessionStorage.getItem('adminId')
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
        const parmas = {
          clientType: this.params.clientType,
          fromUserid: sessionStorage.getItem('adminId'),
          msgType: -3,
          toUserid: this.userInfo.userId
        }
        this.setTimer(parmas)
      }
    },
    open: function () {
      console.log('socket连接成功')
    },
    error: function () {
      console.log('连接错误')
    },
    getMessage: function (msg) {
      console.log('---------------------------')
      // console.log(msg)
      console.log(msg.data)
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf
      const data = JSON.parse(msg.data)
      if (data.content === 'pong') {
        return
      }
      data.addTime = time
      this.messageList.push(data)
      console.log('---------------------------')
    },
    send: function () {
      // this.socket.send(params)
    },
    close: function () {
      console.log('socket已经关闭')
    },
    // 选择会话
    click(record, index) {
      return {
        on: {
          click: () => {
            this.selectChat(record, index)
          }
        }
      }
    },
    // 选择会话
    selectChat(record, index) {
      if (this.socket !== '') {
        this.socket.onclose = this.close
        this.socket.close()
        this.clearTimer()
      }
      this.$set(this.conversationFlagList, index, false)
      this.messageList = []
      this.params.userId = record.userid
      this.params.clientType = record.clientType
      this.getMsgList()
      this.userInfo.name = record.username
      this.userInfo.mobile = '(' + (record.mobile ? record.mobile : '--') + ')'
      this.userInfo.userId = record.userid
      this.userInfo.clientType = record.clientType
      switch (record.clientType) {
        case 0:
          this.userInfo.from = '来自会员端'
          break
        case 1:
          this.userInfo.from = '来自管理端'
          break
        case 2:
          this.userInfo.from = '来自收银台'
          break
        case 3:
          this.userInfo.from = '来自后台'
          break
      }
      // 初始化
      this.init()
      this.refresh()
    },
    // 滚动条置底
    refresh() {
      this.$nextTick(() => {
        // this.midCard = this.$refs.midCard
        // console.log(this.midCard.scrollHeight)
        document.getElementsByClassName('midCard')[0].scrollTop = document.getElementsByClassName('midCard')[0].scrollHeight
        // console.log(document.getElementsByClassName('midCard')[0].scrollTop)
        // console.log(document.getElementsByClassName('midCard')[0].scrollHeight)
      })
    },
    /**
   * 判断当前用户是否 还在线
   */
    isOnlineCurrUser(ws) {
      if (ws) {
        if (ws.readyState === WebSocket.OPEN) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    // 设置定时器
    setTimer(parmas) {
      this.clearTimeSet = setInterval(() => {
        this.socket.send(JSON.stringify(parmas))
      }, 20000)
    },
    // 清除定时器
    clearTimer() {
      clearInterval(this.clearTimeSet)
    },
    // 查看大图
    viewPicture(content) {
      this.handleVisible = true
      this.viewPictureSrc = content
    }
  },
  destroyed() {
    // 销毁监听
    if (this.socket !== '') {
      this.socket.onclose = this.close
      this.socket.close()
      // console.log('退出页面时关闭连接')
      this.clearTimer()
    }
  }
}
</script>
<style lang="less" scoped>
.height-1000 {
  min-height: 600px;
}
.topCard {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.midCard {
  height: 400px;
  // 透明背景
  background-color: rgba(255, 255, 255, 0.2);
  overflow-y: auto;
  .leftPart {
    width: 100%;
    .chatDiv {
      padding: 0 10px 0 10px;
      float: left;
      // CSS3内容自适应
      width: fit-content;
      background-color: white;
      border-radius: 5px;
    }
  }
  .rightPart {
    width: 100%;
    .chatDiv {
      padding: 0 10px 0 10px;
      float: right;
      width: fit-content;
      background-color: #98e165;
      border-radius: 5px;
    }
  }
}
.bottomCard {
  height: 150px;
}

// div {
//   border: 1px solid black;
// }
.time {
  display: flex;
  justify-content: flex-end;
  background-color: rgba(255, 255, 255, 0);
}
.moreRecords {
  display: flex;
  justify-content: center;
  .ant-btn {
    border: 0;
    background-color: rgba(255, 255, 255, 0);
    color: cornflowerblue;
  }
}
::v-deep .ant-table-thead {
  display: none;
}
.unRead {
  color: red;
  left: -1px;
  font-size: 30px;
  line-height: 5px;
  position: absolute;
}
.img {
  width: 100px;
  height: 100px;
}
.largeImg {
  width: 600px;
  height: 600px;
}
::v-deep .ant-modal-body {
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
